var vm = new Vue({
	el: "#datas",
	data: {
		queryDate:""
	},
	mounted: function() {
		// setChart1();
		// setChart2();
		// setChart3();
		this.queryDate =getDateBegin();

		this.allRefresh();
		
	},
	methods: {

		refresh: function(index) {
			index == 1 && setChart1();
			index == 2 && setChart2();
			index == 3 && setChart3();
		},
		
		allRefresh:function(){
			setLine2("chart1_2", null, function(params) {
				sui.open("bump_info.html?type=1")
			})
			
			setLine("chart1_3", null, function(params) {
				sui.open("bump_info.html?type=2")
			})
			
			
			setLine2("chart2_2", null, function(params) {
				sui.open("bump_info.html?type=1")
			})
			
			setLine("chart2_3", null, function(params) {
				sui.open("bump_info.html?type=2")
			})
			
			setLine("chart3_2", null, function(params) {
				sui.open("bump_info.html?type=0")
			})
			
			setLine2("chart3_3", null, function(params) {
				sui.open("bump_info.html?type=1")
			})
			
			
			setDashboard("chart1_1", [{
				value: getRandom(40, 99),
			}]," KWH/KT");
			
			setDashboard("chart2_1", [{value: getRandom(40, 99)}]," KWH/KT");
			
			setDashboard("chart3_1", [{
			
				value: getRandom(40, 99),
			}]," KWH/KT");
			
			
			setDashboard("circle_1", [{
			
				value: getRandom(40, 99),
			}]);
			
			setDashboard("circle_2", [{
			
				value: getRandom(40, 99),
			}]);
			
			setDashboard("circle_3", [{
			
				value: getRandom(40, 99),
			}]);
		},




		echatClick: function(index) {
			sui.open("bump_info.html?type=" + index)
		},
	
		dateChanged:function($event){
			sui.loading();
			
			setTimeout(function(){
				sui.closeLoading()
				this.allRefresh();
			},1500)
			
		}

	},



})





function setChart1() {
	var myChart = echarts.init(document.getElementById('chart1'));

	var data1 = [];


	for (var i = 0; i < 12; i++) {
		data1.push(getRandom(50, 254));
	}

	option = {
		xAxis: {
			type: 'category',
			splitNumber: 2,
			scale: true,
			splitLine: {
				show: false //去掉网格线
			},
			data: ['2:00', '2:30', '3:00', '3:30', '4:00', '4:30', '5:00', '5:30', '6:00', '6:30', '7:00', ],
			axisLabel: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		yAxis: {
			type: 'value',
			splitNumber: 2,
			//scale:true,
			splitLine: {
				show: false //去掉网格线
			},
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: '#fff'
				}
			}
		},
		grid: {
			top: 30,
			left: 35, // 调整这个属性
			right: 10,
			bottom: 30,
		},
		series: [{
			data: data1,
			type: 'line',
			symbol: 'circle', //折线点设置为实心点
			symbolSize: 5, //折线点的大小
			areaStyle: {
				normal: {
					color: '#323F4F' //改变区域颜色
				}
			},
			itemStyle: {
				normal: {
					color: "#262B32", //折线点的颜色
					borderColor: '#386db3',
					borderWidth: 2,
					lineStyle: {
						color: "#386db3" //折线的颜色
					}
				}
			},
		}]
	};

	myChart.setOption(option);
	myChart.on('click', function(params) {
		sui.open("bump_info.html?type=0")
	});

}




function setChart2() {
	var myChart = echarts.init(document.getElementById('chart2'));

	var xAxisData = [];
	var data1 = [];
	var data2 = [];

	var data3 = [];

	for (var i = 0; i < 24; i++) {
		xAxisData.push('Class' + i);
		data1.push((Math.random() * 2).toFixed(2));
		data2.push(-Math.random().toFixed(2));

		data3.push(i + ":00");
	}

	var emphasisStyle = {
		itemStyle: {
			barBorderWidth: 1,
			shadowBlur: 10,
			shadowOffsetX: 0,
			shadowOffsetY: 0,
			shadowColor: 'rgba(0,0,0,0.5)'
		}
	};

	var option = {
		tooltip: {},
		xAxis: {
			type: 'category',
			splitNumber: 2,
			scale: true,
			splitLine: {
				show: false //去掉网格线
			},
			data: data3,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		yAxis: {
			type: 'value',
			splitNumber: 2,
			//scale:true,
			splitLine: {
				show: false //去掉网格线
			},
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: '#fff'
				}
			}
		},
		grid: {
			top: 30,
			left: 35, // 调整这个属性
			right: 10,
			bottom: 30,
		},

		series: [{
				name: 'bar',
				type: 'bar',
				stack: 'one',
				data: data1,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#6AB481'
						}, {
							offset: 1,
							color: '#2D393F'
						}]),
					}
				},

			},
			{
				name: 'bar2',
				type: 'bar',
				stack: 'one',
				data: data2,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: '#CD5757'
						}, {
							offset: 1,
							color: '#4E3C45'
						}]),
					}
				},
			},

		]
	};

	myChart.setOption(option);
	myChart.on('click', function(params) {
		sui.open("bump_info.html?type=1")
	});

}


function setChart3() {
	var chat3 = echarts.init(document.getElementById('chart3'));

	var data1 = [];
	var data2 = [];


	for (var i = 0; i < 40; i++) {
		data1.push(i * 5);
		data2.push(getRandom(5, 25));

	}

	option = {
		xAxis: {
			type: 'category',
			scale: true,
			splitLine: {
				show: false //去掉网格线
			},
			data: data1,
			axisLabel: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		yAxis: {
			type: 'value',
			splitNumber: 2,
			//scale:true,
			splitLine: {
				show: false //去掉网格线
			},
			axisLabel: {
				formatter: '{value}',
				textStyle: {
					color: '#fff'
				}
			}
		},
		grid: {
			top: 30,
			left: 35, // 调整这个属性
			right: 10,
			bottom: 30,
		},
		series: [{
			data: data2,
			type: 'line',
			symbol: 'none', //折线点设置为实心点
			itemStyle: {
				normal: {
					color: "#D65053", //折线点的颜色
					lineStyle: {
						color: "#D65053", //折线的颜色
						show: true,
						shadowColor: 'rgba(214, 80, 85, 0.9)',
						shadowBlur: 8
					},
				},
			},
		}]
	};

	chat3.setOption(option);
	chat3.on('click', function(params) {
		sui.open("bump_info.html?type=3")
	});
}


function circle1() {
	var myChart = echarts.init(document.getElementById('circle_1'));
	var dataArr = [{
		value: 120,
		name: '运行效率'
	}];
	var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
			offset: 0,
			color: '#5CF9FE' // 0% 处的颜色
		},
		{
			offset: 0.17,
			color: '#468EFD' // 100% 处的颜色
		},
		{
			offset: 0.9,
			color: '#468EFD' // 100% 处的颜色
		},
		{
			offset: 1,
			color: '#5CF9FE' // 100% 处的颜色
		}
	]);
	var colorSet = [
		[1, color],
		// [0.91, color],
		// [1, '#FFF']
	];
	var rich = {
		white: {
			fontSize: 50,
			color: '#fff',
			fontWeight: '500',
			padding: [-150, 0, 0, 0]
		},
		bule: {
			fontSize: 70,
			fontFamily: 'DINBold',
			color: '#fff',
			fontWeight: '700',
			padding: [-120, 0, 0, 0],
		},
		radius: {
			width: 350,
			height: 80,
			// lineHeight:80,
			borderWidth: 1,
			borderColor: '#0092F2',
			fontSize: 50,
			color: '#fff',
			backgroundColor: '#1B215B',
			borderRadius: 20,
			textAlign: 'center',
		},
		size: {
			height: 400,
			padding: [100, 0, 0, 0]
		}
	}
	option = {
		// backgroundColor: '#0E1327',
		tooltip: {
			formatter: "{a} <br/>{b} : {c}%"
		},

		series: [{
				type: 'gauge',
				name: '外层辅助',
				radius: '74%',
				startAngle: '225',
				endAngle: '-45',
				splitNumber: '120',
				pointer: {
					show: false
				},
				detail: {
					show: false,
				},
				data: [{
					value: 1
				}],
				// data: [{value: 1, name: 90}],
				title: {
					show: true,
					offsetCenter: [0, 30],
					textStyle: {
						color: '#fff',
						fontStyle: 'normal',
						fontWeight: 'normal',
						fontFamily: '微软雅黑',
						fontSize: 20,
					}
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: [
							[1, '#00FFFF']
						],
						width: 2,
						opacity: 1
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: true,
					length: 20,
					lineStyle: {
						color: '#051932',
						width: 0,
						type: 'solid',
					},
				},
				axisLabel: {
					show: false
				}
			},
			{
				type: 'gauge',
				radius: '70%',
				startAngle: '225',
				endAngle: '-45',
				pointer: {
					show: true
				},
				detail: {
					formatter: function(value) {
						var num = Math.round(value);
						return '{bule|dB}{white|}' + '{size|' + '}';
					},
					rich: rich,
					"offsetCenter": ['0%', "55%"],
				},
				data: dataArr,
				title: {
					show: false,
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: colorSet,
						width: 25,
						// shadowBlur: 15,
						// shadowColor: '#B0C4DE',
						shadowOffsetX: 0,
						shadowOffsetY: 0,
						opacity: 1
					}
				},
				axisTick: {
					show: false
				},
				splitLine: {
					show: false,
					length: 25,
					lineStyle: {
						color: '#00377a',
						width: 2,
						type: 'solid',
					},
				},
				axisLabel: {
					show: false
				},
				animationDuration: 4000,
			},
			{
				name: '灰色内圈', //刻度背景
				type: 'gauge',
				z: 2,
				radius: '60%',
				startAngle: '225',
				endAngle: '-45',
				//center: ["50%", "75%"], //整体的位置设置
				axisLine: { // 坐标轴线
					lineStyle: { // 属性lineStyle控制线条样式
						color: [
							[1, '#018DFF']
						],
						fontSize: 20,
						width: 2,
						opacity: 1, //刻度背景宽度
					}
				},
				splitLine: {
					show: false
				},
				axisLabel: {
					show: false
				},
				pointer: {
					show: false
				},
				axisTick: {
					show: false
				},
				detail: {
					show: 0
				}
			},
			{
				name: "白色圈刻度",
				type: "gauge",
				radius: "60%",
				startAngle: 225, //刻度起始
				endAngle: -45, //刻度结束
				min: 0,
				max: 120,
				splitNumber: 6,
				z: 4,
				axisTick: {
					show: false
				},
				splitLine: {
					length: 16, //刻度节点线长度
					lineStyle: {
						width: 2,
						color: '#018DFF'
					} //刻度节点线
				},
				axisLabel: {
					color: 'rgba(255,255,255,8)',
					fontSize: 24,
				}, //刻度节点文字颜色
				pointer: {
					show: false
				},
				axisLine: {
					lineStyle: {
						opacity: 0
					}
				},
				detail: {
					show: false
				},
				data: [{
					value: 0,
					name: ""
				}]
			},
			{ //内圆
				type: 'pie',
				radius: '40%',
				center: ['50%', '50%'],
				z: 1,
				itemStyle: {
					normal: {
						color: new echarts.graphic.RadialGradient(.5, .5, .8, [{
								offset: 0,
								color: '#4978EC'
							},
							{
								offset: .5,
								color: '#1E2B57'
							},
							{
								offset: 1,
								color: '#141F3D'
							}
						], false),
						label: {
							show: false
						},
						labelLine: {
							show: false
						}
					},
				},
				hoverAnimation: false,
				label: {
					show: false,
				},
				tooltip: {
					show: false
				},
				data: [100],
				animationType: "scale"
			},
			{ //外圆
				type: 'pie',
				radius: '85%',
				center: ['50%', '50%'],
				z: 0,
				itemStyle: {
					color: '#141C33',
				},
				hoverAnimation: false,
				label: {
					show: false,
				},
				tooltip: {
					show: false
				},
				data: [120],
				animationType: "scale"
			}
		]
	};

	myChart.setOption(option);





}
